<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Color conversion tests</title>
<link rel="stylesheet" href="https://htest.dev/htest.css" crossorigin />
<script src="https://htest.dev/htest.js" crossorigin></script>
<link rel="stylesheet" href="style.css" />

<script src="../color.js" type="module"></script>

<script>
function convertTo(spaceId) {
	return function() {
		let td = document.currentScript.parentNode.previousElementSibling;

		$out(() => {
			let color = new Color(td.textContent);
			return color.to(spaceId).coords.join(", ");
		});
	}
}

let convertToSRGB = convertTo("sRGB");
let convertToP3 = convertTo("p3");
let convertToHWB = convertTo("hwb");
let convertToHSL = convertTo("hsl");
let convertToLCH = convertTo("lch");
let convertToXYZ = convertTo("xyz-d65");
let convertTo2100PQ = convertTo("rec2100pq");
let convertToJzazbz = convertTo("jzazbz");
let convertToJzCzHz = convertTo("jzczhz");
let convertToICtCp = convertTo("ICtCp");
let convertToRec2020 = convertTo("rec2020");
let convertToOK = convertTo("oklab");
let convertToOKLCh = convertTo("oklch");
let convertTosrgbLin = convertTo("srgb-linear");
let convertToHSV = convertTo("hsv");

</script>

</head>
<body data-epsilon=".001">

<h1>Color conversion Tests</h1>
<p>These tests parse different color formats and then print out the coordinates in various color spaces.</p>

<section>
	<h1>sRGB to LCH</h1>
	<table class="reftest" data-test="numbers" data-epsilon=".02" data-columns="3" data-colors="1">
		<tr>
			<td>slategray</td>
			<td>
				<script>convertToLCH();</script>
			</td>
			<td>52.697472, 11.242899, 253.010088</td>
		</tr>
		<tr>
			<td>white</td>
			<td>
				<script>convertToLCH();</script>
			</td>
			<td>100, 0.0146, NaN</td>
		</tr>
		<tr>
			<td>black</td>
			<td>
				<script>convertToLCH();</script>
			</td>
			<td>0, 0, NaN</td>
		</tr>
	</table>
</section>

<section>
	<h1>sRGB to (D65) XYZ</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
	<tr>
		<td>white</td>
		<td>
			<script>convertToXYZ();</script>
		</td>
		<td>0.9504559270516717, 1, 1.0890577507598784</td>
	</tr>
	</table>
</section>

<section>
	<h1>HWB to sRGB</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr>
			<td>hwb(0 20% 40%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td><!--#993333--> 0.6, 0.2, 0.2</td>
		</tr>
		<tr>
			<td>hwb(90 30% 5%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td>0.625, 0.950, 0.300 </td>
		</tr>
		<tr>
			<td>hwb(30 0% 80%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td>0.2, 0.1, 0</td>
		</tr>
		<tr>
			<!-- angles can be outside [0 to 360) -->
			<td>hwb(720 20% 40%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td><!--#993333--> 0.6, 0.2, 0.2</td>
		</tr>
		<tr>
			<td>hwb(-270 30% 5%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td>0.625, 0.950, 0.300 </td>
		</tr>
		<tr>
			<!-- white and black normalize to less than 100%, achromatic -->
			<td>hwb(0 40% 80%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td><!--#993333--> 0.3333333, 0.3333333, 0.3333333</td>
		</tr>
		<tr>
			<!-- white and black normalize to less than 100%, achromatic -->
			<td>hwb(0 50% 50%)</td>
			<td>
				<script>convertToSRGB();</script>
			</td>
			<td><!--#993333--> 0.5, 0.5, 0.5</td>
		</tr>
	</table>
</section>

<section>
	<h1>sRGB to HWB</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr>
			<td>rgb(60% 20% 20%)</td>
			<td>
				<script>
					convertToHWB();
				</script>
			</td>
			<td>0, 20, 40</td>
		</tr>
		<tr>
			<td>black</td>
			<td>
				<script>
					convertToHWB();
				</script>
			</td>
			<td>NaN, 0, 100</td>
		</tr>
		<tr>
			<td>white</td>
			<td>
				<script>
					convertToHWB();
				</script>
			</td>
			<td>NaN, 100, 0</td>
		</tr>
	</table>
</section>

<section>
	<h1>Out of RGB gamut conversions</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="HWB">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertToHWB();
				</script>
			</td>
			<td>230.639, -29.921, -5.0489</td>
		</tr>
		<tr title="HSL">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertToHSL();
				</script>
			</td>
			<td>230.639, 179.655, 37.564</td>
		</tr>
		<tr title="HSV">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertToHSV();
				</script>
			</td>
			<td>230.639, 128.483, 105.0489</td>
		</tr>
	</table>
</section>

<section>
	<h1>sRGB to HSL</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr>
			<td>black</td>
			<td>
				<script>
					convertToHSL();
				</script>
			</td>
			<td>NaN, 0, 0</td>
		</tr>
		<tr>
			<td>white</td>
			<td>
				<script>
					convertToHSL();
				</script>
			</td>
			<td>NaN, 0, 100</td>
		</tr>
	</table>
</section>


<section>
	<h1>P3 to sRGB</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="mid grey">
			<td>color(display-p3 0.47 0.47 0.47)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>0.47, 0.47, 0.47</td>
		</tr>
		<tr title="D65 white">
			<td>color(display-p3 1 1 1)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>1, 1, 1</td>
		</tr>
		<tr title="neutral with negative components">
			<td>color(display-p3 -0.1 -0.1 -0.1)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>-0.1, -0.1, -0.1</td>
		</tr>
		<tr title="a nice teal, inside sRGB gamut">
			<td>color(display-p3 0.238 0.532 0.611)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>0.019595, 0.54027, 0.621351</td>
		</tr>
		<tr title="P3 primary red, outside sRGB gamut">
			<td>color(display-p3 1 0 0)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>1.09299, -0.226745, -0.150155</td>
		</tr>
		<tr title="P3 primary green, outside sRGB gamut">
			<td>color(display-p3 0 1 0)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>-0.511567, 1.018276, -0.310711</td>
		</tr>
		<tr title="P3 primary blue, just outside sRGB gamut">
			<td>color(display-p3 0 0 1)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>0, 0, 1.042131</td>
		</tr>

	</table>
</section>

<!-- <section>
	<h1>Round-tripping</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="P3 mid grey, round-trip to sRGB and back">
			<td>color(display-p3 0.47 0.47 0.47)</td>
			<td>
				<script>
					roundtripP3SRGB();
				</script>
			</td>
			<td>0.47000, 0.47000, 0.47000</td>
		</tr>
	</table>
</section> -->

<!-- 0.000000730 -->
<section>
	<h1>rec2100pq to XYZ and back</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="BT.2100 to XYZ">
			<td>color(rec2100-pq 0.3720 0.3720 0.3720)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>0.11118, 0.11698, 0.12740</td>
		</tr>
		<tr title="XYZ to BT.2100">
			<td>color(xyz 0.11118, 0.11698, 0.12740)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.3720, 0.3720, 0.3720</td>
		</tr>
		<tr title="sRGB to BT.2100">
			<td>white</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.5807, 0.5807, 0.5807</td>
		</tr>
		<tr title="Display P3 to BT.2100">
			<td>color(display-p3 1 0 0)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.5514, 0.2939, 0</td>
		</tr>
		<tr title="Display P3 to BT.2100">
			<td>color(display-p3 0 1 0)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.4200, 0.5744, 0.2248</td>
		</tr>
		<tr title="Display P3 to BT.2100">
			<td>color(display-p3 0 0 1)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.2970, 0.2026, 0.5790</td>
		</tr>
		<tr title="BT.2020 to BT.2100">
			<td>color(rec2020 1 0 0)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0.5807, 0, 0</td>
		</tr>
		<tr title="BT.2020 to BT.2100">
			<td>color(rec2020 0 1 0)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0, 0.5807, 0</td>
		</tr>
		<tr title="BT.2020 to BT.2100">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertTo2100PQ();
				</script>
			</td>
			<td>0, 0, 0.5807</td>
		</tr>
	</table>
</section>

<section>
	<h1>Jzazbz</h1>
	<p>Conversions to Absolute D65 XYZ tested against published Matlab code.</p>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="Jzazbz to XYZ">
			<td>color(jzazbz 0.5 0 0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>7.986957, 8.397692, 9.136922</td>
		</tr>
		<tr title="Jzazbz to XYZ">
			<td>color(jzazbz 1 0 0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>48.187785, 50.665878, 55.125885</td>
		</tr>
		<tr title="Jzazbz to XYZ">
			<td>color(jzazbz 0.1 -0.05 0.05)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>0.108518, 0.172874, 0.074937</td>
		</tr>
		<tr title="XYZ to Jzazbz">
			<td>color(xyz 0 0 0)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.0, 0.0, 0.0</td>
		</tr>
		<tr title="sRGB white (D65) to Jzazbz">
			<td>white</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.222065, -0.0002, -0.0001</td>
		</tr>
		<tr title="rec2020 D65 white to Jzazbz">
			<td>color(rec2020 1 1 1)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.22206525, -0.000161, -0.000117</td>
		</tr>
		<tr title="Jzazbz of D65 white to sRGB">
			<td>color(jzazbz 0.22206525 -0.000161 -0.000117)</td>
			<td>
				<script>
					convertToSRGB();
				</script>
			</td>
			<td>1, 1, 1</td>
		</tr>
		<tr  title="sRGB to Jzazbz">
			<td>#FFFF80</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.212398, -0.0171, 0.0914</td>
		</tr>
		<tr  title="rec2020 to Jzazbz">
			<td>color(rec2020 1 0 0)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.154543, 0.1643, 0.1351</td>
		</tr>
		<tr  title="rec2020 to Jzazbz">
			<td>color(rec2020 0 1 0)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.160578, -0.2066, 0.1462</td>
		</tr>
		<tr title="rec2020 to Jzazbz">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.091785, -0.0775, -0.2047</td>
		</tr>
		<!-- <tr  title="rec2100 18% gray to Jzazbz">
			<td>color(rec2100pq 0.34 0.34 0.34)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.34, 0, 0</td>
		</tr> -->
	</table>
</section>

<section>
	<h1>JzCzHz</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="Jzazbz to JzCzHz">
			<td>color(jzazbz 0.5 0 0)</td>
			<td>
				<script>
					convertToJzCzHz();
				</script>
			</td>
			<td>0.5, 0, NaN</td>
		</tr>
		<tr title="Jzazbz to JzCzHz, ε">
			<td>color(jzazbz 0.2 0.000004 -0.000003)</td>
			<td>
				<script>
					convertToJzCzHz();
				</script>
			</td>
			<td>0.2, 0.000005, NaN</td>
		</tr>
		<tr title="Jzazbz to JzCzHz, ε">
			<td>color(jzazbz 0.2 0.000005 -0.000005)</td>
			<td>
				<script>
					convertToJzCzHz();
				</script>
			</td>
			<td>0.2, 0.00000707, NaN</td>
		</tr>
		<tr title="Jzazbz to JzCzHz">
			<td>color(jzazbz 0.1 -0.05 0.05)</td>
			<td>
				<script>
					convertToJzCzHz();
				</script>
			</td>
			<td>0.1, 0.070710678, 135</td>
		</tr>
		<tr title="JzCzHz to Jzazbz">
			<td>color(jzczhz 0.1 0.070710678 135)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.1, -0.05, 0.05</td>
		</tr>
		<tr title="Jzazbz to JzCzHz">
			<td>color(jzazbz 0.1 0.1 -0.08)</td>
			<td>
				<script>
					convertToJzCzHz();
				</script>
			</td>
			<td>0.1, 0.12806248, 321.34019</td>
		</tr>
		<tr title="JzCzHz to Jzazbz">
			<td>color(jzczhz 0.1, 0.12806248, 321.34019)</td>
			<td>
				<script>
					convertToJzazbz();
				</script>
			</td>
			<td>0.1, 0.1, -0.08</td>
		</tr>
	</table>
</section>

<section>
	<h1>ICtCp</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="XYZ to ICtCp">
			<td>color(xyz 0 0 0)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.0, 0.0, 0.0</td>
		</tr>
		<tr title="XYZ of D50 to ICtCp">
			<td>color(xyz 0.96422, 1.00000, 0.82521)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.5820, 0.0344, 0.0001</td>
		</tr>
		<!-- <tr title="XYZ of D65 to ICtCp">
			<td>color(xyz 0.95047, 1.00000, 1.08883)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.225288  -0.016988  -0.062262</td>
		</tr> -->
		<tr title="sRGB white (D65) to ICtCp">
			<td>white</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.5820, 0.0344, 0.0001</td>
		</tr>
		<tr title="rec2020 white to ICtCp">
			<td>color(rec2020 1 1 1)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.5820, 0.0344, 0.0001</td>
		</tr>
		<tr  title="rec2020 red to ICtCp">
			<td>color(rec2020 1 0 0)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.4413, -0.1164, 0.3985</td>
		</tr>
		<tr  title="rec2020 green to ICtCp">
			<td>color(rec2020 0 1 0)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.5305, -0.4247, -0.1219</td>
		</tr>
		<tr title="rec2020 blue to ICtCp">
			<td>color(rec2020 0 0 1)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.3687,  0.2746,  -0.2406</td>
		</tr>
		<!-- <tr  title="rec2100 18% gray to ICtCp">
			<td>color(rec2100pq 0.34 0.34 0.34)</td>
			<td>
				<script>
					convertToICtCp();
				</script>
			</td>
			<td>0.34, 0, 0</td>
		</tr> -->
		<tr  title="ICtCp rec2020 red back to rec2020">
			<td>color(ictcp 0.4413 -0.1164 0.3985)</td>
			<td>
				<script>
					convertToRec2020();
				</script>
			</td>
			<td>1, 0, 0</td>
		</tr>
		<tr  title="ICtCp rec2020 green back to rec2020">
			<td>color(ictcp 0.5305 -0.4247 -0.1219)</td>
			<td>
				<script>
					convertToRec2020();
				</script>
			</td>
			<td>0, 1, 0</td>
		</tr>
		<tr title="ICtCp rec2020 blue back to rec2020">
			<td>color(ictcp 0.3687  0.2746  -0.2406)</td>
			<td>
				<script>
					convertToRec2020();
				</script>
			</td>
			<td>0, 0, 1</td>
		</tr>
	</table>
</section>

<section>
	<h1>OKLab</h1>
	<p>Conversions tested against results from published linear sRGB to OKLab C++ code (using better matrices, updated 2021-01-2)</p>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
	<!-- see  https://github.com/svgeesus/svgeesus.github.io/blob/master/Color/OKLab-notes.md -->
		<tr title="sRGB white (D65) to OKlab">
			<td>white</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>1.000000, 0.000000, 0.000000</td>
		</tr>
		<tr title="sRGB red (D65) to OKlab">
			<td>red</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.627955, 0.224863, 0.125846</td>
		</tr>
		<tr title="sRGB lime (D65) to OKlab">
			<td>lime</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.86644, -0.233888, 0.179498</td>
		</tr>
		<tr title="sRGB blue (D65) to OKlab">
			<td>blue</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.452014, -0.032457, -0.311528</td>
		</tr>
		<tr title="sRGB cyan (D65) to OKlab">
			<td>cyan</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.905399, -0.149444, -0.039398</td>
		</tr>
		<tr title="sRGB magenta (D65) to OKlab">
			<td>magenta</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.701674, 0.274566, -0.169156</td>
		</tr>
		<tr title="sRGB yellow (D65) to OKlab">
			<td>yellow</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.967983, -0.071369, 0.198570</td>
		</tr>
		<tr title="sRGB black (D65) to OKlab">
			<td>black</td>
			<td>
				<script>
					convertToOK();
				</script>
			</td>
			<td>0.000000, 0.000000, 0.000000</td>
		</tr>
	</table>
</section>

<section>
	<h1>OKLCh</h1>
	<table class="reftest" data-test="numbers" data-epsilon=".02" data-columns="3" data-colors="1">
		<tr title="sRGB white (D65) to OKlab">
			<td>white</td>
			<td>
				<script>
					convertToOKLCh();
				</script>
			</td>
			<td>1.0, 0.0001, NaN</td>
		</tr>
		<tr title="sRGB red (D65) to OKlab">
			<td>red</td>
			<td>
				<script>
					convertToOKLCh();
				</script>
			</td>
			<td>0.627954, 0.257627, 29.2271</td>
		</tr>
		<tr title="sRGB lime (D65) to OKlab">
			<td>lime</td>
			<td>
				<script>
					convertToOKLCh();
				</script>
			</td>
			<td>0.866439, 0.294803, 142.5112</td>
		</tr>
		<tr title="sRGB blue (D65) to OKlab">
			<td>blue</td>
			<td>
				<script>
					convertToOKLCh();
				</script>
			</td>
			<td>0.452013, 0.313319, 264.058541</td>
		</tr>
	</table>
</section>

<section>
	<h1>Linear-light sRGB</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="sRGB white to linear (identity">
			<td>white</td>
			<td>
				<script>
					convertTosrgbLin();
				</script>
			</td>
			<td>1.0, 1.0, 1.0</td>
		</tr>
		<tr title="mid grey to linear">
			<td>rgb(50% 50% 50%)</td>
			<td>
				<script>
					convertTosrgbLin();
				</script>
			</td>
			<td>0.21404114, 0.21404114, 0.21404114</td>
		</tr>
	</table>
</section>

<section>
	<h1>ACEScc to XYZ</h1>
	<table class="reftest" data-test="numbers" data-columns="3" data-colors="1">
		<tr title="ACEScc media white to XYZ">
			<td>color(acescc 1.0 1.0 1.0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>211.8195, 222.8610, 242.7084</td>
		</tr>
		<tr title="mid grey (linear 0.5) to XYZ">
			<td>color(acescc 0.4977169 0.4977169 0.4977169)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>0.475228, 0.500000, 0.544529</td>
		</tr>
		<tr title="media black to XYZ">
			<td>color(acescc 0 0 0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>0.001127, 0.001186, 0.001291</td>
		</tr>
		<tr title="deepest black to XYZ">
			<td>color(acescc -0.358447, -0.358447, -0.358447)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>0, 0, 0</td>
		</tr>
		<tr title="ACEScc red to XYZ">
			<td>color(acescc 1.0 0.0 0.0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>145.3586, 59.6545, -1.1981</td>
		</tr>
		<tr title="ACEScc green to XYZ">
			<td>color(acescc 0.0 1.0 0.0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>28.5798, 150.2844, 0.306392</td>
		</tr>
		<tr title="ACEScc blue to XYZ">
			<td>color(acescc 0.0 0.0 1.0)</td>
			<td>
				<script>
					convertToXYZ();
				</script>
			</td>
			<td>37.8833, 12.9243, 243.6027</td>
		</tr>
		<tr title="ACEScc red to P3">
			<td>color(acescc 1.0 0.0 0.0)</td>
			<td>
				<script>
					convertToP3();
				</script>
			</td>
			<td>11.42071, -3.24602, -0.722011</td>
		</tr>
		<tr title="ACEScc green to P3">
			<td>color(acescc 0.0 1.0 0.0)</td>
			<td>
				<script>
					convertToP3();
				</script>
			</td>
			<td>-6.096756, 10.318155, -2.713562</td>
		</tr>
		<tr title="ACEScc blue to P3">
			<td>color(acescc 0.0 0.0 1.0)</td>
			<td>
				<script>
					convertToP3();
				</script>
			</td>
			<td>-3.266071, -1.586111, 10.178351</td>
		</tr>
	</table>
</section>

<section>
	<h1>Get coordinates</h1>
	<table class="reftest" data-test="numbers">
		<tr title="color.c">
			<td>
				<script>
					$out(() => {
						var color = new Color("slategray");
						return color.c
					});
				</script>
			</td>
			<td>11.23415</td>
		</tr>
		<tr title="color.lch[1]">
			<td>
				<script>
					$out(() => {
						var color = new Color("slategray");
						return color.lch[1];
					});
				</script>
			</td>
			<td>11.23415</td>
		</tr>
		<tr title="color.lch.c">
			<td>
				<script>
					$out(() => {
						var color = new Color("slategray");
						return color.lch.c;
					});
				</script>
			</td>
			<td>11.23415</td>
		</tr>
		<tr title="color.oklch.c">
			<td>
				<script>
					$out(() => {
						var color = new Color("slategray");
						return color.oklch.c;
					});
				</script>
			</td>
			<td>0.03100055</td>
		</tr>
		<tr title="color.jzazbz.Jz">
			<td>
				<script>
					$out(() => {
						var color = new Color("slategray");
						return color.jzazbz.jz
					});
				</script>
			</td>
			<td>0.11646942</td>
		</tr>
		<tr title="color.jzazbz.Jz">
			<td>
				<script>
					$out(() => {
						var color = new Color("color(jzazbz 0.54 0 0)");
						return color.jzazbz.jz
					});
				</script>
			</td>
			<td>0.54</td>
		</tr>
	</table>
</section>

<script src="./reftests.js" type="module"></script>
</body>
</html>
